<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="baidu-site-verification" content="code-GW1QVIY8rA" />
    <meta charset="UTF-8">
    <title th:text="${session.lang == 'en' ? companyProfile.nameEn : companyProfile.name}"></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}">
    <meta name="description" th:content="${companyProfile.seoDescription}">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="./statics/css/amazeui.min.css">
    <link rel="stylesheet" href="./statics/css/animate.css">
    <link rel="stylesheet" href="./statics/css/layout.css">
    <link href="./statics/css/owl.carousel.css" rel="stylesheet">
    <link href="./statics/css/owl.theme.css" rel="stylesheet">
    <link rel="stylesheet" href="./statics/css/demo.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="./statics/css/venobox/venobox.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="./statics/css/swiper/swiper.min.css">
    <link rel="stylesheet" href="./statics/css/index.css">
    <script src="./statics/js/jquery-1.11.0.min.js"></script>
    <script src="./statics/js/jquery.easing.min.js"></script>
    <script src="./statics/js/modernizr-2.6.2.min.js"></script>
    <script src="./statics/js/waypoints.min.js"></script>
    <script type="text/javascript" src="./statics/js/js.js"></script>
    <script src="./statics/js/dsf.Map.js"></script>
    <script src="./statics/js/dsf.js"></script>
    <script type="text/javascript" src="./statics/js/venobox/venobox.min.js"></script>
    <script type="text/javascript" src="./statics/js/swiper/swiper.min.js"></script>
    <!--[if IE]>
    <style>
        #main-nav-hold {
            background: #192c69;
        }

        #main-nav-hold .main-nav {
            background: #192c69;
        }
    </style>
    <![endif]-->
</head>

<body>
<div id="content" class="trans-contact">
    <!--弹窗-->
    <div class="menu">
        <div class="logo-btn"><a href="/"><img th:src="${companyProfile.logo}"/></a>
        </div>
        <div class="close"><a href="javascript:yifei.showMenu();">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                 id="Layer_1"
                 x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20"
                 xml:space="preserve" class="svg-raw replaced-svg">
            <path fill="#FFFFFF"
                  d="M18.19,19.771l-8.153-8.152l-8.152,8.153l-1.603-1.604l8.152-8.152L0.281,1.862L1.886,0.26l8.152,8.152  l8.154-8.153l1.602,1.604l-8.152,8.153l8.153,8.154L18.19,19.771z">
            </path>
          </svg>
        </a></div>
        <div class="menu-items">
            <ul>
                <li th:each="m: ${menus}">
                    <a th:href="${m.href}"><span th:text="${m.title}">首页</span><th:block th:text="${m.titleEn}"></th:block></a>
                    <div class="heading-sep"></div>
                </li>

            </ul>
        </div>
    </div>
    <!--弹窗  end-->
    <!--视频 strat-->
    <header class="top">
        <div class="parallax-top" style="transform: translate3d(0px, 0px, 0px);">
            <div class="overlay"></div>
            <video autoplay loop class="headervid" muted>
                <source src="./statics/video/dsf.mp4" type="video/mp4">
                <p>您的浏览器不支持视频格式</p>
            </video>
            <div class="logo"><a href="/"><img th:src="${companyProfile.logo}"/></a>
            </div>
            <nav class="header-nav">
                <a href="javascript:yifei.showMenu();" class="menu-btn">
                    <span class="menu-txt">菜单</span>
                    <span class="menu-sandwhich">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                </a>
            </nav>
            <div class="text">
                <div class="container">
                    <h1>Innovation-driven <br/>
                        development</h1>
                    <h3>创新驱动发展</h3>
                </div>
            </div>
            <div class="scroll">
                <a href="javascript:yifei.scrollTo(&#39;#engineering&#39;);">
                    <img src="./statics/images/shubiao.png" width="40" height="40" style="opacity:0.6;filter:alpha(opacity=60);">
                    <br>
                    SCROLL
                </a>
            </div>
        </div>
    </header>
    <!--视频 end-->
    <div id="viewport">
        <div id="main-nav-hold">
            <nav class="main-nav trans-nav">
                <!--#include file="./public/html/menu.html"-->
                <div th:replace="menu :: menu"></div>
            </nav>
        </div>

        <section id="engineering" th:if="${productList != null && !productList.isEmpty()}">
            <div class="swiper-container videoImgText">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" th:style="'background: url(' + ${mc.imageUrl} + ') no-repeat center; background-size: 100% auto; height: 100vh;position: relative;'" th:each="mc: ${productList}">
                        <div class="container" style="height: 100vh;">
                            <div class="hpro-right">
                                <h3 class="up-cn" th:text="${mc.title}">并联机器人</h3>
                                <h3 class="up-en" th:text="${mc.titleEn}">Parallel Mechanism</h3>
                                <i class="sm-line"></i>
                                <p th:text="${session.lang == 'en' ? mc.seoKeyword : mc.seoDescription}"></p>
                                <a th:href="'/product_detail?id=' + ${mc.id}" class="viwe" th:text="${i18n.key46}">查看更多</a>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button">
                <div class="swiper-button-prev prev" style="top: 50%;"></div>
                <div class="swiper-button-next next" style="top: 50%;"></div>
            </div>
            <script>
                var videoImgText = new Swiper('.videoImgText', {
                    loop: true,
                    autoplay: 5000,
                    observer: true,
                    observeParents: true,
                    nextButton: '.next',
                    prevButton: '.prev'
                });
            </script>
        </section>

        <section id="design" style="background: #fff;background-size:cover;background-position:center center;background-repeat:no-repeat;" th:if="${coperativeCustomers != null && !coperativeCustomers.isEmpty()}">
            <div class="am-container no-paddding">
                <div class="column-left">
                    <h3 class="up-en">Cooperation partners</h3>
                    <h3 class="up-cn">合作伙伴</h3>
                    <i class="sm-line"></i>
                </div>
                <div class="clear"></div>
            </div>
            <div class="am-container no-paddding rb-hy">
                <script src="./statics/js/owl.carousel.js"></script>
                <script>
                    $(function () {
                        $('#owl-demo').owlCarousel({
                            items: 4,
                            lazyLoad: true,
                            navigation: true,
                            navigationText: [" ", " "]
                        });
                    });
                </script>
                <a href="/client" class="viwe" th:text="${i18n.key46}">查看更多</a>
                <div id="owl-demo" class="owl-carousel">
                    <a href="javascript:;" class="item" th:each="c: ${coperativeCustomers}"><img class="lazyOwl" th:data-src="${c.logo}" th:alt="${c.name}">
                        <p th:text="${c.name}">中国烟草</p>
                    </a>
                </div>
        </section>
        <section id="research" class="">
            <div class="shadow-bottom"></div>
            <div class="container">
                <div class="am-container no-paddding">
                    <div class="column-left">
                        <h3 class="up-en" style="color:#fff;">news</h3>
                        <h3 class="up-cn" style="color:#fff;">新闻动态</h3>
                        <i class="sm-line" style=" background-color:#fff;"></i>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="am-container grid-news">
                    <div class="am-container no-paddding">
                        <a href="#" class="viwe" th:text="${i18n.key46}">查看更多</a>
                    </div>
                    <div class="am-left48 left">
                        <figure class="bg-newimg effect-oscar wowload fadeIn" th:if="${news != null && news.size() >= 1}">
                            <img th:src="${news.get(0).img}" th:alt="${session.lang == 'en' ? news.get(0).titleEn : news.get(0).title}"/>
                            <figcaption>
                                <a class="venoboxinline" th:href="'/new_detail?id=' + ${news.get(0).id}">
                                    <h3 style="width:80%;" th:title="${session.lang == 'en' ? news.get(0).titleEn : news.get(0).title}" th:text="${session.lang == 'en' ? news.get(0).titleEn : news.get(0).title}"></h3>
                                    <i></i>
                                    <p style="width:90%;" th:text="${session.lang == 'en' ? news.get(0).descriptionEn : news.get(0).description}"></p>
                                    <div class="amz-container rb-hg25"></div>
                                    <span th:text="${#dates.format(news.get(0).createtime, 'yyyy年MM月dd日')}">2021年06月26日</span>
                                </a>
                            </figcaption>
                        </figure>
                        <div class="am-left-half left">
                            <figure class="effect-oscar wowload fadeIn" th:if="${news != null && news.size() >= 2}">
                                <img th:src="${news.get(1).img}" th:alt="${session.lang == 'en' ? news.get(1).titleEn : news.get(1).title}"/>
                                <figcaption>
                                    <a class="venoboxinline" th:href="'/new_detail?id=' + ${news.get(1).id}">
                                        <h3 style="width:80%;" th:title="${session.lang == 'en' ? news.get(1).titleEn : news.get(1).title}" th:text="${session.lang == 'en' ? news.get(1).titleEn : news.get(1).title}"></h3>
                                        <i></i>
                                        <p style="width:90%;" th:text="${session.lang == 'en' ? news.get(1).descriptionEn : news.get(1).description}"></p>
                                        <div class="amz-container rb-hg25"></div>
                                        <span th:text="${#dates.format(news.get(1).createtime, 'yyyy年MM月dd日')}">2021年06月26日</span>
                                    </a>
                                </figcaption>
                            </figure>
                            <figure class="effect-oscar wowload fadeIn" th:if="${news != null && news.size() >= 3}">
                                <img th:src="${news.get(2).img}" th:alt="${session.lang == 'en' ? news.get(2).titleEn : news.get(2).title}"/>
                                <figcaption>
                                    <a class="venoboxinline" th:href="'/new_detail?id=' + ${news.get(2).id}">
                                        <h3 style="width:80%;" th:title="${session.lang == 'en' ? news.get(2).titleEn : news.get(2).title}" th:text="${session.lang == 'en' ? news.get(2).titleEn : news.get(2).title}"></h3>
                                        <i></i>
                                        <p style="width:90%;" th:text="${session.lang == 'en' ? news.get(2).descriptionEn : news.get(2).description}"></p>
                                        <div class="amz-container rb-hg25"></div>
                                        <span th:text="${#dates.format(news.get(2).createtime, 'yyyy年MM月dd日')}">2021年06月26日</span>
                                    </a>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    <div class="am-left48 am-left482">
                        <div class="am-left-half left">
                            <figure class="effect-oscar wowload fadeIn" th:if="${news != null && news.size() >= 4}">
                                <img th:src="${news.get(3).img}" th:alt="${session.lang == 'en' ? news.get(3).titleEn : news.get(3).title}"/>
                                <figcaption>
                                    <a class="venoboxinline" th:href="'/new_detail?id=' + ${news.get(3).id}">
                                        <h3 style="width:80%;" th:title="${session.lang == 'en' ? news.get(3).titleEn : news.get(3).title}" th:text="${session.lang == 'en' ? news.get(3).titleEn : news.get(3).title}"></h3>
                                        <i></i>
                                        <p style="width:90%;" th:text="${session.lang == 'en' ? news.get(3).descriptionEn : news.get(3).description}"></p>
                                        <div class="amz-container rb-hg25"></div>
                                        <span th:text="${#dates.format(news.get(3).createtime, 'yyyy年MM月dd日')}">2021年06月26日</span>
                                    </a>
                                </figcaption>
                            </figure>
                            <figure class="effect-oscar wowload fadeIn" th:if="${news != null && news.size() >= 5}">
                                <img th:src="${news.get(4).img}" th:alt="${session.lang == 'en' ? news.get(4).titleEn : news.get(4).title}"/>
                                <figcaption>
                                    <a class="venoboxinline" th:href="'/new_detail?id=' + ${news.get(4).id}">
                                        <h3 style="width:80%;" th:title="${session.lang == 'en' ? news.get(4).titleEn : news.get(4).title}" th:text="${session.lang == 'en' ? news.get(4).titleEn : news.get(4).title}"></h3>
                                        <i></i>
                                        <p style="width:90%;" th:text="${session.lang == 'en' ? news.get(4).descriptionEn : news.get(4).description}"></p>
                                        <div class="amz-container rb-hg25"></div>
                                        <span th:text="${#dates.format(news.get(4).createtime, 'yyyy年MM月dd日')}">2021年06月26日</span>
                                    </a>
                                </figcaption>
                            </figure>
                        </div>
                        <figure class="bg-newimg effect-oscar wowload fadeIn" th:if="${news != null && news.size() >= 6}">
                            <img th:src="${news.get(5).img}" th:alt="${session.lang == 'en' ? news.get(5).titleEn : news.get(5).title}"/>
                            <figcaption>
                                <a class="venoboxinline" th:href="'/new_detail?id=' + ${news.get(5).id}">
                                    <h3 style="width:80%;" th:title="${session.lang == 'en' ? news.get(5).titleEn : news.get(5).title}" th:text="${session.lang == 'en' ? news.get(5).titleEn : news.get(5).title}"></h3>
                                    <i></i>
                                    <p style="width:90%;" th:text="${session.lang == 'en' ? news.get(5).descriptionEn : news.get(5).description}"></p>
                                    <div class="amz-container rb-hg25"></div>
                                    <span th:text="${#dates.format(news.get(5).createtime, 'yyyy年MM月dd日')}">2021年06月26日</span>
                                </a>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <script>
                $(function () {
                    $(document).ready(function () {
                        var hbimg = $(".bg-newimg figure figcaption").height();
                        var wbimg = $(".bg-newimg figure figcaption").width();
                        var sbhimg = $(".am-left-half figure figcaption").height();
                        var sbimg = $(".am-left-half figure figcaption").width();
                        $(".bg-newimg figure img").css({
                            "height": hbimg,
                            "width": wbimg
                        });
                        $(".am-left-half figure img").css({
                            "height": sbhimg,
                            "width": sbimg
                        });

                    })
                })
            </script>
            <style>

            </style>
            <!--#include file="./public/html/footer.html"-->
            <div th:replace="footer :: footer"></div>
        </section>
    </div>
</div>
<style>
    .footer-info > p,
    .rb-copyright {
        color: #a7a7a7;
    }
</style>
</body>
</html>